<template>
    <div class="rightbody">

      <!-- <div class="tabheader">
        <ul>
          <li :class="{'active':nav_top_btn == 0}" @click="checkNva(0)">文字</li>
          <li :class="{'active':nav_top_btn == 1}" @click="checkNva(1)">动画</li>
          <li :class="{'active':nav_top_btn == 2}" @click="checkNva(2)">跳转</li>
        </ul>
      </div> -->




      <div class="texttabs1" v-show="nav_top_btn == 0">
        <!-- <div class="biaoti1 biaoti" @click="checkBiaoti(1)">大标题</div> -->
        <div class="biaoti2 biaoti" @click="checkBiaoti(2)">点击添加标题</div>
        <div class="biaoti3 biaoti" @click="checkBiaoti(3)">点击添加副标题</div>
        <!-- <div class="biaoti4 biaoti" @click="checkBiaoti(4)">小标题</div> -->
        <div class="biaoti5 biaoti" @click="checkBiaoti(5)">点击添加正文</div>
        <ul style="margin-top:15px;border-top:1px solid #eee;">
          <li>
            <label>字体</label>
            <Select v-model="fontFamily" style="width:225px" @on-change="fontFamilyChange">
                 <Option-group label="常用字体">
                    <Option v-for="item in changYongList" :value="item.value" :key="item"  :style="setFontFamily(item)">{{ item.label }}</Option>
                </Option-group> 

                <Option-group label="简细字体">
                    <Option v-for="item in jianXiFontList" :value="item.value" :key="item" :style="setFontFamily(item)">{{ item.label }} </Option>
                </Option-group>     

                <Option-group label="粗黑字体">
                    <Option v-for="item in cuHeiFontList" :value="item.value" :key="item"  :style="setFontFamily(item)">{{ item.label }}</Option>
                </Option-group>
                <Option-group label="中国风字体">
                    <Option v-for="item in zhongGuoFengFontList" :value="item.value" :key="item" :style="setFontFamily(item)">{{ item.label }} </Option>
                </Option-group>                 
                <Option-group label="可爱字体">
                    <Option v-for="item in keAiFontList" :value="item.value" :key="item" :style="setFontFamily(item)">{{ item.label }} </Option>
                </Option-group> 

                <Option-group label="广告字体">
                    <Option v-for="item in guanGaoFontList" :value="item.value" :key="item" :style="setFontFamily(item)">{{ item.label }} </Option>
                </Option-group>

                <Option-group label="特殊字体">
                    <Option v-for="item in teshuFontList" :value="item.value" :key="item" :style="setFontFamily(item)">{{ item.label }} </Option>
                </Option-group>  

               <Option-group label="英文字体">
                    <Option v-for="item in englishFontList" :value="item.value" :key="item" :style="setFontFamily(item)">{{ item.label }} </Option>
                </Option-group>                 
                                             
            </Select>
          </li>
          <li>
            <label>字号</label>
            <Select v-model="fontSize" style="width:225px" @on-change="fontSizeChange">
                <Option v-for="item in options2" :value="item.value" :key="item">{{ item.label }}</Option>
            </Select>
          </li>
          <li>
            <div class="subtabheader">
              <ul>
                <li @click="isTextOrBgColor=1,BgColorListIndex=-99" :class="{active:isTextOrBgColor==1}">文字</li>
                <li @click="isTextOrBgColor=2,BgColorListIndex=-99" :class="{active:isTextOrBgColor==2}">背景</li>
              </ul>
            </div>
            <div class="colortab">
              <!-- <a style="background:#1abd9b;margin-left:30px;" @click="changeColor1('#1abd9b')" :class="{'active':BgColorListIndex == -1}"></a> -->

              <template v-for="(item,index) in BgColorList" >

                  <a :style="setAstyle(index)" @click="changeColor(index)" :class="{'active':BgColorListIndex == index}"></a>
                </template>

              <a class="nocolor" @click="changeColor2" :class="{'active':BgColorListIndex == -2}"></a>
              <p class="colorpicker" :class="{'active':BgColorListIndex == -3}">
              <el-color-picker v-model="color1" @change="changeColor3"></el-color-picker>
              </p>
            </div>
          </li>
          <li>
            <div class="slideblock">
              <label>字距</label>
              <Slider v-model="letterSpacing" style="float:left;width:230px" :tip-format="hideFormat" @on-input="textSpacingChange" show-input></Slider>
            </div>
          </li>
          <li>
            <div class="slideblock">
              <label>行距</label>
              <Input-number :max="2.5" :min="1" :step="0.25" v-model="lineHeight" style="float:left;width:230px" @on-change="lineHeightChange"></Input-number>
            </div>
          </li>
          <li>
            <div class="fontstyle">
              <a :class="{'active': fontWeight !== 'normal'}" @click="fontWeightChange" title="加粗"></a>
              <a :class="{'active': fontStyle !== 'normal'}" @click="fontStyleChange" title="斜体"></a>
              <a :class="{'active': textDecoration !== 'none'}" @click="textDecorationChange" title="下划线"></a>
              <a :class="{'active': textAlign == 'left'}" @click="textAlignChange('left')" title="左对齐文本"></a>
              <a :class="{'active': textAlign == 'center'}" @click="textAlignChange('center')" title="居中对齐文本"></a>
              <a :class="{'active': textAlign == 'right'}" @click="textAlignChange('right')" title="右对齐文本"></a>
              <a :class="{'active': writingMode == 'vertical-lr'}" @click="writingModeChange" title="旋转"></a>
            </div>
          </li>
          <li>
            <div class="slideblock">
              <label>透明</label>
              <Slider :max="100" :min="0" @on-input="OpacityChange" v-model="opacity" style="float:left;width:230px" :tip-format="hideFormat" show-input></Slider>
            </div>
          </li>
          <li>
            <div class="slideblock">
              <label>旋转</label>
              <Slider :max="360" :min="0" v-model="rotateDeg" @on-input="rotateDegChange" style="float:left;width:230px" :tip-format="hideFormat" show-input></Slider>
            </div>
          </li>
          <Collapse v-if="userInfo.is_designer==1">
            <Panel name="1">&nbsp;&nbsp;边框样式
              <div class="collapse" slot="content">
                <div class="item">
                  <label>样式</label>
                  <Select v-model="borderStyle" style="width:225px" @on-change="borderStyleChange">
                    <Option v-for="item in options3" :value="item.value" :key="item">{{ item.label }}</Option>
                  </Select>
                </div>
                <div class="item clearfix">
                  <label>颜色</label>
                  <div class="colortab2 clearfix">
                    <!-- <a style="background:#1abd9b" :class="{'active':borderListIndex == -2}" @click="changeBorderColor1('#1abd9b')"></a> -->
                    <template v-for="(item,index) in borderColorList" >

                          <a :style="setAstyle(index)" @click="changeBorderColor(index)" :class="{'active':borderListIndex == index}"></a>
                    </template>
                    <a class="nocolor" :class="{'active':borderListIndex == -2}" @click="changeBorderColor2"></a>
                    <p class="colorpicker" :class="{'active':borderListIndex == -3}">
                      <el-color-picker v-model="color2" @change="changeBorderColor3"></el-color-picker>
                    </p>
                  </div>
                </div>
                <div class="item">
                  <div class="slideblock">
                    <label>粗细</label>
                    <Slider :max="20" v-model="borderWidth" @on-input="borderWidthChange" style="float:left;width:230px" :tip-format="hideFormat" show-input></Slider>
                  </div>
                </div>
                <div class="item">
                  <div class="slideblock">
                    <label>圆角</label>
                    <Slider v-model="borderRadius" :min="0" :max="360" style="float:left;width:230px" :tip-format="hideFormat" @on-input="borderRadiusChange" show-input></Slider>
                  </div>
                </div>
              </div>
            </Panel>
          </Collapse>
        </ul>
      </div>

      <!-- <div class="texttabs2" v-show="nav_top_btn == 1">
        <div class="animbtn">
          <a class="addanimbtn" @click="addAni">添加动画</a>
          <a class="previewanimbtn" @click="reviewAni">预览动画</a>
        </div>
        <div class="animcollapse" v-if="anim.length">
            <Collapse @on-change="panelChange" :accordion="true">
              <Panel v-for="(aniObj,index) in JSON.parse(anim)" style="background:#fff;position:relative;" >动画{{index +1}}
                <div class="collapse" slot="content">
                  <Select v-model="aniObj.type" @on-change="aniTypeChange" style="margin-bottom: 15px;">
                    <Option v-for="item in animationList" :value="item.value" :key="item">{{ item.label }}</Option>
                  </Select>
                  <div class="numberblock">
                    <div class="inputtime">
                      <span>时间</span>
                      <Input-number :max="20" :min="0" :step="0.1" v-model="aniObj.duration" style="width:80px;margin-right:10px;" @on-change="aniDurationChange"></Input-number>
                    </div>
                    <div class="inputdelay">
                      <span>延迟</span>
                      <Input-number :max="20" :min="0" :step="0.1" v-model="aniObj.delay" style="width:80px;" @on-change="aniDelayChange"></Input-number>
                    </div>
                  </div>
                  <div class="numberblock">
                    <div class="inputcount">
                      <span>次数</span>
                      <Input-number :max="10" :min="0" :disabled="aniObj.count == -1" v-model="aniObj.count == -1 ? '': aniObj.count" style="width:80px;margin-right:20px;" @on-change="aniCountChange

                      "></Input-number>
                    </div>
                    <div>
                      <Checkbox style="font-size:14px;width:80px;" @on-change="aniCountChange1">
                        <span>循环</span>
                      </Checkbox>
                    </div>
                  </div>
                </div>
                <a class="delanimbtn" @click="delAni(index)"></a>

              </Panel>
            </Collapse>
            
          </div>
      </div> -->

      <!-- <div class="texttabs3" v-show="nav_top_btn == 2">
         <ul>
          <li>
            <label>类型</label>
            <Select  v-model="linktype" @on-change="jumpTypeChange" style="width:217px;">
                    <Option v-for="item in options4" :value="item.value" :key="item">{{ item.label }}</Option>
            </Select>
          </li>
          <li v-show="linktype == '页面'">
            <label>页面</label>
            <Input-number :max="pagesData.length" :min="1" style="width:217px;" @on-change="pageNumberChange" v-model="jumpPageNumber"></Input-number>
          </li>
          <li v-show="linktype == '网址'" >
            <label>网址</label>
            <Input  v-model="jumpUrl" style="width:217px;" @on-change="jumpUrlChange" placeholder="请输入网址"></Input>
          </li>
         </ul>
      </div> -->

    </div>
</template>


<script>
import { mapActions, mapGetters } from 'vuex'
  export default {
   computed: {
      ...mapGetters([
        "checkedItemData",
        "pagesData",
        "userInfo"
      ]),
    },
    data() {
      return {
        time:0,
        color1:null,
        color2:null,
        isTextOrBgColor:1,
        BgColorListIndex:-99,
        borderListIndex:-1,
        BgColorList:["#1abd9b","#fff","#45d1d7","#4b5eb2","#eeea00","#f55b2e","#d92940","#000"],
        borderColorList:["#1abd9b","#fff","#45d1d7","#4b5eb2","#eeea00","#f55b2e","#d92940","#000"],
        copyCss:{},
        nav_top_btn:0,
        animationList:[{
          value: 'none',
          label: '无效果'
        },{
          value: 'fadeInNormal',
          label: '淡入'
        },{
          value: 'rotateInDownLeft',
          label: '从左滚入'
        },{
          value: 'rotateInDownRight',
          label: '从右滚入'
        },{
          value: 'zoomIn',
          label: '放大'
        },{
          value: 'zoomInDown',
          label: '下落放大'
        },{
          value: 'fadeIn',
          label: '弹性放大'
        },{
          value: 'expandOpen',
          label: '弹性缩小'
        },{
          value: 'fadeInRight',
          label: '从右飞入'
        },{
          value: 'fadeInLeft',
          label: '从左飞入'
        },{
          value: 'fadeInUp',
          label: '向上飞入'
        },{
          value: 'fadeInDown',
          label: '向下飞入'
        },{
          value: 'rotateIn',
          label: '旋转出现'
        },{
          value: 'flipInY',
          label: '左右翻转'
        },{
          value: 'flipInX',
          label: '上下翻转'
        },{
          value: 'lightSpeedIn',
          label: '刹车'
        },{
          value: 'slideLeft',
          label: '从右滑入'
        },{
          value: 'slideRight',
          label: '从左滑入'
        },{
          value: 'slideUp',
          label: '向上滑入'
        },{
          value: 'slideDown',
          label: '向下滑入'
        },{
          value: 'stretchRight',
          label: '从右展开'
        },{
          value: 'stretchLeft',
          label: '从左展开'
        },{
          value: 'pullUp',
          label: '向上展开'
        },{
          value: 'pullDown',
          label: '向下展开'
        }
          ,{
            value: 'moveRight',
            label: '向下移入'
          }
        ],
        changYongList:[{
          value: 'HWFangSong',
          label: '华文仿宋'
          },{
            value: 'HWXingKai',
            label: '华文行楷'
          },{
            value: 'HYXiYuan',
            label: '汉仪细园'
          },{
            value: 'WRYaHei',
            label: '微软雅黑'
          },{
            value: 'SYHeiTi',
            label: '思源黑体'
          },{
            value: 'SYSongTi',
            label: '思源宋体'
          }],

        jianXiFontList:[{
          value: 'HYDianYaTiJ',
          label: '汉仪典雅体'
          },{
            value: 'HYLiangPinXianCuJ',
            label: '汉仪良品线粗'
          },{
            value: 'HYQingTing-55J',
            label: '汉仪清庭'
          },{
            value: 'HYXiXiuTiJ',
            label: '汉仪细秀体'
          },{
            value: 'yegenyou_jingyun',
            label: '叶根友静韵体'
          },{
            value: 'HYBaoSongF',
            label: '汉仪报宋体'
          },{
            value: 'ZZGFYHQXT',
            label: '造字工房悦黑纤细体'
          },{
            value: 'RXXXT',
            label: '日系细线体'
          }],

        cuHeiFontList:[{
          value: 'HYLiHeiJ',
          label: '汉仪立黑'
          },{
            value: 'HYYaKuHeiJ',
            label: '汉仪雅酷黑'
          },{
            value: 'HYZhuZiMeiXinTiJ',
            label: '汉仪铸字美心体'
          },{
            value: 'HYZongYiTiJ',
            label: '汉仪综艺体'
          }],


        keAiFontList:[{
          value: 'HYBaiQiTiJ',
          label: '汉仪白棋体'
          },{
            value: 'HYCaiDieTiJ',
            label: '汉仪彩蝶体'
          },{
            value: 'HYChangYiTiJ',
            label: '汉仪长艺体'
          },{
            value: 'HYShenGongTiJ',
            label: '汉仪神工体'
          },{
            value: 'HYShuangXianTiJ',
            label: '叶根友双线体'
          },{
            value: 'HYTangTangCuTiJ',
            label: '汉仪糖糖粗体'
          },{
            value: 'HYXiaoMaiTiJ',
            label: '汉仪小麦体'
          },{
            value: 'HYYaYaTiJ',
            label: '汉仪丫丫体简'
          },{
            value: 'ZHANKKLT',
            label: '站酷快乐体'
          }],


          guanGaoFontList:[{
            value: 'HXPNRBJT',
            label: '胡晓波男人帮简体'
            },{
              value: 'ZZGFLH',
              label: '造字工房力黑'
            },{
              value: 'ZZGFBHT',
              label: '造字工房版黑体'
            },{
              value: 'ZZGFSY',
              label: '造字工房尚雅'
            },{
              value: 'ZZGFYH',
              label: '造字工房悦黑'
            },{
              value: 'XDhbb',
              label: '新蒂黑板报体'
            },{
              value: 'XDhbbd',
              label: '新蒂黑板报底字'
            },{
              value: 'ZHSyx',
              label: '张海山锐线'
            },{
              value: 'STFGXYgbk',
              label: '书体坊郭小语钢笔楷体'
            },{
              value: 'ZKgdh',
              label: '站酷高端黑'
            },{
              value: 'MINIjcq',
              label: '迷你简粗倩'
            },{
              value: 'ZZGFls',
              label: '造字工房朗宋体'
            }],
           englishFontList:[{
            value: 'arial',
            label: 'Arial'
            },{
              value: 'ColonnaMT',
              label: 'Colonna MT'
            },{
              value: 'DryBrush',
              label: 'DryBrush'
            },{
              value: 'HEMIHEAD',
              label: 'HemiHead'
            },{
              value: 'MANIFESTO',
              label: 'MANIFESTO'
            },{
              value: 'ruach',
              label: 'Ruach'
            },{
              value: 'DINCond-LightAlternate',
              label: 'DINCond-LightAlternate'
            },{
              value: 'CODELight',
              label: 'CODE Light'
            },{
              value: 'Dense-Regular',
              label: 'Dense-Regular'
            },{
              value: 'AngsanaNew',
              label: 'Angsana New'
            },{
              value: 'MINMekanikLETIjcq',
              label: 'Mekanik  LET'
            }],            

        teshuFontList:[{
          value: 'HYHaHaTiJ',
          label: '汉仪哈哈体'
          },{
            value: 'HYHeiLiZhiTiJ',
            label: '汉仪黑荔枝体'
          },{
            value: 'HYXiaoBoZheZhiTiJ',
            label: '汉仪晓波折纸体'
          },{
            value: 'HYXiaRiTiJ',
            label: '汉仪夏日体'
          }],

        zhongGuoFengFontList:[{
          value: 'egenyou_maobixingshu_1',
          label: '叶根友毛笔行书简体'
          },{
            value: 'HYGuoQiangXingShuJ',
            label: '汉仪国强行书'
          },{
            value: 'HYZhangNaiRenXingShuJ',
            label: '汉仪张乃仁行书'
          },{
            value: 'yegenyou_jifengcaoshu',
            label: '叶根友劲风草书'
          },{
            value: 'LIXUKSF',
            label: '李旭科书法'
          },{
            value: 'HANYISWSF',
            label: '汉仪尚巍手书'
          },{
            value: 'TSYTDZK',
            label: '田氏颜体大字库'
          },{
            value: 'DUANNMB',
            label: '段宁毛笔行书'
          }],        
       
        options2: [{
          value: '12px',
          label: '12px'
        }, {
          value: '13px',
          label: '13px'
        },{
          value: '14px',
          label: '14px'
        },{
          value: '16px',
          label: '16px'
        },{
          value: '18px',
          label: '18px'
        },{
          value: '20px',
          label: '20px'
        },{
          value: '24px',
          label: '24px'
        },{
          value: '26px',
          label: '26px'
        },{
          value: '28px',
          label: '28px'
        },{
          value: '30px',
          label: '30px'
        },{
          value: '32px',
          label: '32px'
        },{
          value: '34px',
          label: '34px'
        },{
          value: '36px',
          label: '36px'
        },{
          value: '40px',
          label: '40px'
        },{
          value: '44px',
          label: '44px'
        },{
          value: '46px',
          label: '46px'
        },{
          value: '48px',
          label: '48px'
        },{
          value: '50px',
          label: '50px'
        },{
          value: '60px',
          label: '60px'
        },{
          value: '64px',
          label: '64px'
        },{
          value: '72px',
          label: '72px'
        },{
          value: '96px',
          label: '96px'
        },{
          value: '106px',
          label: '106px'
        },{
          value: '120px',
          label: '120px'
        },{
          value: '144px',
          label: '144px'
        },{
          value: '288px',
          label: '288px'
        },{
          value: '366px',
          label: '366px'
        },{
          value: '477px',
          label: '477px'
        },{
          value: '566px',
          label: '566px'
        },
        ],
        options3: [{
          value: 'none',
          label: '无'
        },{
          value: 'dotted',
          label: '点'
        },{
          value: 'solid',
          label: '实线'
        }, {
          value: 'dashed',
          label: '虚线'
        }],
        options4: [{
          value: '无',
          label: '无'
        },{
          value: '网址',
          label: '网址'
        },{
          value: '页面',
          label: '页面'
        }],
        fontFamily: '',
        fontSize: '',
        fontWeight: "normal",
        fontStyle: "normal",
        textDecoration: "none",
        textAlign: "left",
        writingMode: "horizontal-tb",
        opacity:0,
        borderStyle: 'none',
        borderRadius:0,
        borderWidth:0,
        linktype: 0,
        jumpPageNumber:0,
        jumpUrl:'',
        letterSpacing: 0,
        lineHeight: 0,
        rotateDeg: 0,
        borderradius: 0,
        anim:[],
        currentAniIndex:-1,


      }
    },
    mounted(){

//      console.log(this.checkedItemData)
      this.givedata(this.checkedItemData);
    },

    watch:{

      checkedItemData: function(newCheckedItemData){

        // this.checkedItemData]
        // debugger
//        console.log('赋值了.....')

        // debugger
        // this.copyCheckedItemData = newCheckedItemData;

        // this.textOpciaty = newCheckedItemData.css.opacity;
        // this.copyCss = newCheckedItemData.in.css;

        // debugger
        // debugger
        // console.log(this.opacity * 100)

        this.givedata(newCheckedItemData);
      },
    },
    methods: {
      givedata(data){

        // debugger

       this.anim = JSON.stringify(data.anim);
        this.copyCss = data.in.css;

        this.fontFamily = data.in.css.fontFamily;

        this.fontSize = data.in.css.fontSize;

        // console.log('asdasd' + typeof(newCheckedItemData.in.css.textSpacing))

        this.letterSpacing = typeof(data.in.css.letterSpacing) == "undefined" ?  0 : parseInt(data.in.css.letterSpacing.replace("px",""));
        this.lineHeight = typeof(data.in.css.lineHeight) == "undefined" ?  1 : data.in.css.lineHeight;
        this.fontWeight = typeof(data.in.css.fontWeight) == "undefined" ? "normal" : data.in.css.fontWeight;
        this.fontStyle = typeof(data.in.css.fontStyle) == "undefined" ? "normal" : data.in.css.fontStyle;
        this.textDecoration = typeof(data.in.css.textDecoration) == "undefined" ? "none" : data.in.css.textDecoration;
        this.textAlign = typeof(data.in.css.textAlign) == "undefined" ? "" : data.in.css.textAlign;
        this.writingMode = typeof(data.in.css.writingMode) == "undefined" ? "horizontal-tb" : data.in.css.writingMode;
        this.borderStyle = typeof(data.in.css.borderStyle) == "undefined" ? "none" : data.in.css.borderStyle;
        // this.opacity = typeof(newCheckedItemData.in.css.opacity) == "undefined" ? 0 : newCheckedItemData.in.css.opacity * 100;
        this.opacity = typeof(data.in.css.opacity) == "undefined" ? 0 : 100- data.out.css.opacity * 100;
        this.borderWidth = typeof(data.in.css.borderWidth) == "undefined" ?  0 : parseInt(data.in.css.borderWidth.replace("px",""));

        this.borderRadius = typeof(data.in.css.borderRadius) == "undefined" ?  0 : parseInt(data.in.css.borderRadius.replace("px",""));


        // console.log(typeof(data.in.properties.hasUrl) == "undefined")
        if (typeof(data.in.properties.hasUrl) == "undefined" || data.in.properties.hasUrl == 0) {
          this.linktype = "无"
        }else if (data.in.properties.hasUrl == 1) {
            this.linktype = "网址"
            // debugger
            this.jumpUrl = data.in.properties.jumpUrl
        }else{

            this.linktype = "页面"
            this.jumpPageNumber = typeof(data.in.properties.jumpPageNumber) == "undefined" ? 1 :parseInt(data.in.properties.jumpPageNumber);
        }
      },
      checkNva(index) {
        switch(index) {
          case 0:
            this.nav_top_btn = 0
            break;
          case 1:
            this.nav_top_btn = 1
            break;
          case 2:
            this.nav_top_btn = 2
            break;
        }
      },
      checkBiaoti(index){
        this.$store.dispatch('addText',index);
      },
      setFontFamily(item){
        // debugger
        return "font-family: " + item.value + ";";
      },
      hideFormat () {
        return null;
      },
      setAstyle(index){

// debugger
            var color = this.BgColorList[index];

            return "background: "+ color;

         },
        changeColor2(){

            this.BgColorListIndex = -2;

            // debugger

           var params = {};
           //修改文字颜色
            if (this.isTextOrBgColor == 1) {

              params.value = "";
              params.key = "color";

            }else{

              params.value = "";
              params.key = "backgroundColor";

            }

         this.$store.dispatch('changeTextStyle', params)
        },
       changeColor3(value){
        // debugger
            this.BgColorListIndex = -3;

            // console.log(value)

             var params = {};
           //修改文字颜色
            if (this.isTextOrBgColor == 1) {

              params.value = value;
              params.key = "color";

            }else{

              params.value = value;
              params.key = "backgroundColor";

            }

         this.$store.dispatch('changeTextStyle', params)
        },
      changeColor(index){
        this.BgColorListIndex = index;
        var color = this.BgColorList[index];


        //修改文字颜色
       var params = {};
       //修改文字颜色
        if (this.isTextOrBgColor == 1) {

          params.value = color;
          params.key = "color";

        }else{

          params.value = color;
          params.key = "backgroundColor";

        }

         this.$store.dispatch('changeTextStyle', params)

       },
      btnon(){
       alert("btn on!!!")
      },
     fontFamilyChange(value){

      // debugger
//      console.log(value)

      this.fontFamily = value;

       var params = {};
       params.value = value;
       params.key = "fontFamily";
       // debugger

       this.$store.dispatch('changeTextStyle', params)

     },
     fontSizeChange(value){
      this.fontSize = value;

       var params = {};
       params.value = value;
       params.key = "fontSize";
       // debugger

       this.$store.dispatch('changeTextStyle', params)

     },

     textSpacingChange(value){
      // debugger

      this.letterSpacing = value;

       var params = {};
       params.value = value + "px";
       params.key = "letterSpacing";
       // debugger

       this.$store.dispatch('changeTextStyle', params)

     },
     lineHeightChange(value){
//      console.log(value)
        this.lineHeight = value;
        var params = {};
        params.value = value
        params.key = "lineHeight";
       // debugger

       this.$store.dispatch('changeTextStyle', params)

     },

     fontWeightChange(){

          if (this.fontWeight == "normal") {

            this.fontWeight = "bold";
          }else{
             this.fontWeight = "normal";
          }


         var params = {};
         params.value = this.fontWeight;
         params.key = "fontWeight";
       // debugger

         this.$store.dispatch('changeTextStyle', params)

     },
     fontStyleChange(){

        if (this.fontStyle == "normal") {

            this.fontStyle = "italic";
          }else{
             this.fontStyle = "normal";
          }


         var params = {};
         params.value = this.fontStyle;
         params.key = "fontStyle";
       // debugger

         this.$store.dispatch('changeTextStyle', params)

     },
     textDecorationChange(){

       if (this.textDecoration == "none") {

            this.textDecoration = "underline";
          }else{
             this.textDecoration = "none";
          }


         var params = {};
         params.value = this.textDecoration;
         params.key = "textDecoration";
       // debugger

         this.$store.dispatch('changeTextStyle', params)

     },

     textAlignChange(value){


      // debugger

        if (value == "left") {

            if (this.textAlign == "left") {

                this.textAlign = "";
            }else{

                this.textAlign = "left"

            }
        }else if (value == "center"){

           if (this.textAlign == "center") {

                this.textAlign = "";
            }else{

                this.textAlign = "center"

            }
        }else{
           if (this.textAlign == "right") {

                this.textAlign = "";
            }else{

                this.textAlign = "right"

            }

        }

         var params = {};
         params.value = this.textAlign;
         params.key = "textAlign";
         this.$store.dispatch('changeTextStyle', params)

     },

     writingModeChange(){

       var value = "";
        if(this.writingMode == 'horizontal-tb'){

            value = "vertical-lr"
        }else{

          value = "horizontal-tb";
        }

         var params = {};
         params.value = value;
         params.key = "writingMode";
         this.$store.dispatch('changeTextStyle', params)
     },
     OpacityChange(value){

          // this.opacity = value;

          // console.log(parseFloat((1 - value / 100).toFixed(2)))

         var params = {};
         params.value = value;
         params.key = "opacity";
         params.type = "out";
       // // // // debugger

         // console.log(value)

         this.$store.dispatch('changeTextStyle', params)

      },
      rotateDegChange(value){

        // this.rotateDeg = value;

//        console.log(value)
         var params = {};
         params.value = "rotateZ(" + value +"deg)";
         params.key = "transform";
         params.type = "out";
       // // // debugger

//       console.log(params.value)

         this.$store.dispatch('changeTextStyle', params)


      },
      borderStyleChange(value){

         var params = {};
         params.value = value;
         params.key = "borderStyle";
//         console.log(params.value)

         this.$store.dispatch('changeTextStyle', params)
      },
      borderWidthChange(value){
          var params = {};
         params.value = value + "px";
         params.key = "borderWidth";
//         console.log(params.value)
         // debugger
         this.$store.dispatch('changeTextStyle', params)

      },
      changeBorderColor(index){

          var color = this.borderColorList[index];

          this.borderListIndex = index;
          var params = {};
          params.value = color;
          params.key = "borderColor";
          this.$store.dispatch('changeTextStyle', params)


      },
      changeBorderColor2(){
         this.borderListIndex = -2;

          this.clearBorderStyle();
           var params = {};
          params.value = "";
          params.key = "borderColor";

          // debugger
          this.$store.dispatch('changeTextStyle', params)

      },
      clearBorderStyle(){

           var params = {};
          params.value = "none";
          params.key = "borderStyle";

          // debugger
          this.$store.dispatch('changeTextStyle', params)
      },
      changeBorderColor3(value){

          var params = {};
          params.value = value;
          params.key = "borderColor";

          // debugger
          this.$store.dispatch('changeTextStyle', params)

      },
      borderRadiusChange(value){
//          console.log(value)
          var params = {};
          params.value =  value + "px";
          params.key = "borderRadius";

          // debugger
          this.$store.dispatch('changeTextStyle', params)
      },

      //添加动画
      addAni(){

          var params = {};
          params.type = "add";


          this.$store.dispatch('changeAni', params)
      },
      //删除动画
      delAni(index){

         var params = {};
          params.type = "del";
          params.index = index;

          this.$store.dispatch('changeAni', params)

      },
      //预览动画
      reviewAni(){
        // var anim = this.$store.state.workData.pages[this.$store.state.currentPage - 1].elements[this.$store.state.checkedItems[0]].anim

        // if (anim.length == 0) {

        //   return
        // }
        this.$store.dispatch('reviewAni');

      },
      panelChange(key){

        // console.log(key);
        this.currentAniIndex = parseInt(key[0]);
        // debugger
      },
      aniTypeChange(value){

//        console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex ;
        params.key = "type";
        params.value = value;
        this.$store.dispatch('changeAni', params)
      },
      aniDurationChange(value){

          // console.log('value' + value);
//      console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "duration";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniDelayChange(value){
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "delay";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniCountChange(value){

        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniCountChange1(value){

//        console.log('value' + value);


// console.log(JSON.parse(this.anim)[this.currentAniIndex].count)
// console.log([this.currentAniIndex])
// console.log(JSON.parse(this.anim)[this.currentAniIndex].count + "dddddd")
        // debugger
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = (value == true ? -1 : 1);

        // debugger
        this.$store.dispatch('changeAni', params)
      },


      jumpTypeChange(value){

        var v = 0;

        if (value == "无") {

          v= 0
        }else if (value == '网址') {
          v= 1
        }else{

          v= 2
        }

         var params = {};
         params.value = v;
         params.key = "hasUrl";
         params.type  = "in",
//         console.log(params.value)

         this.$store.dispatch('changeTextStyle', params)
      },
      pageNumberChange(value){

       var params = {};
         params.value = value;
         params.key = "jumpPageNumber";
         params.type  = "in",

         this.$store.dispatch('changeTextStyle', params)
      },
      jumpUrlChange(value){
        // debugger
//        console.log(this.jumpUrl)
         var params = {};
         params.value = this.jumpUrl;
         params.key = "jumpUrl";
         params.type  = "in",

         this.$store.dispatch('changeTextStyle', params)
      },
   }
  }
</script>


<style type="text/javascript">
.tabheader{height: 45px;line-height: 45px;width: 100%;overflow: hidden;background: #f0f0f0;}
.tabheader li{float: left;width: 33.3%;text-align: center;font-size: 14px;cursor: pointer;}
.tabheader li.active{font-weight: bold;color: #1abd9b;background: #fff;}
.texttabs1, .formtab1{position: fixed;top: 54px;left: 80px;width: 300px;overflow-y: auto;}
.texttabs1 .biaoti{text-align: center;transform: rotate(0deg);opacity: 1;text-decoration: none;letter-spacing: 0px;cursor: pointer;}
.texttabs1 .biaoti:hover{border: 1px solid #1abd9b;}
.texttabs1 .biaoti1{height:62px;line-height: 1.3;font-size: 48px;font-weight: bold;}
.texttabs1 .biaoti2{height:40px;line-height: 1.3;font-size: 30px;font-weight: bold;margin-top: 15px;}
.texttabs1 .biaoti3{height:32px;line-height: 1.8;font-size: 20px;font-weight: normal;}
.texttabs1 .biaoti4{height:26px;line-height: 1.6;font-size: 18px;font-weight: normal;}
.texttabs1 .biaoti5{height:23px;line-height: 1.8;font-size: 14px;font-weight: normal;}
.texttabs1>ul>li,.texttabs3>ul>li,
.collapse .item{width: 280px;margin: 15px auto;}
.slideblock{overflow: hidden;}
.texttabs1 li label,.texttabs3 li label,
.slideblock label,
.collapse label{float: left;width: 50px; height: 36px;line-height: 36px;font-size: 14px;text-indent: 5px;}
.subtabheader{height: 30px;line-height: 30px;width: 270px;overflow: hidden;background: #fff;margin: 0 auto;}
.subtabheader li{float: left;width: 60px;text-align: center;font-size: 14px;cursor: pointer;margin: 0;}
.subtabheader li.active{font-weight: bold;color: #4c4c4c;background: #ebebeb;border-top-left-radius: 3px;border-top-right-radius: 3px;}
.colortab{height: 60px;width: 270px;margin: 0 auto;background: #ebebeb;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}
.colortab a{float: left; width: 20px;height: 20px;margin: 20px 2px;}
.colortab2 a{float: left; width: 18px;height: 18px;margin: 21px 1px;}
.colortab a.active,.colortab p.active{width: 24px;height: 24px;border: 2px solid #fff;margin: 15px 1px;}
.colortab2 a.active,.colortab2 p.active{width: 22px;height: 22px;border: 2px solid #fff;margin: 16px 1px;}
a.nocolor{background: url(../assets/images/nocolor.png) no-repeat center;background-size: contain;}
.colortab .colorpicker{float: left; width: 20px;height: 20px;margin: 20px 2px;background: url(../assets/images/colorpicker.png) no-repeat center;background-size: contain;}
.colortab2 .colorpicker{float: left; width: 18px;height: 18px;margin: 21px 1px;background: url(../assets/images/colorpicker.png) no-repeat center;background-size: contain;}
.colortab2{float: left; height: 60px;width: 230px;background: #ebebeb;border-radius: 3px;}
.colortab2 a:nth-child(1){margin-left: 12px;}
.colortab a:nth-child(1){margin-left: 12px;}
.fontstyle{overflow: hidden;}
.fontstyle a{float: left;width: 36px;height: 28px;border:1px solid #fff;border-radius: 4px;}
.fontstyle a:nth-child(1){background: url(../assets/images/fsicon1.png) no-repeat center;}
.fontstyle a:nth-child(2){background: url(../assets/images/fsicon2.png) no-repeat center;}
.fontstyle a:nth-child(3){background: url(../assets/images/fsicon3.png) no-repeat center;}
.fontstyle a:nth-child(4){background: url(../assets/images/fsicon4.png) no-repeat center;}
.fontstyle a:nth-child(5){background: url(../assets/images/fsicon5.png) no-repeat center;}
.fontstyle a:nth-child(6){background: url(../assets/images/fsicon6.png) no-repeat center;}
.fontstyle a:nth-child(7){background: url(../assets/images/fsicon7.png) no-repeat center;}
.fontstyle a.active{border:1px solid #d7d7d7;background-color: #eee;}

.animbtn{overflow: hidden;padding:0 20px;margin: 0 auto;border-bottom: 1px solid #dfe6ec;}
.animbtn a{float: left;width: 108px;height: 28px;line-height: 28px;font-size: 14px;text-indent: 37px;margin: 25px 10px;border: 1px solid #1abd9b;border-radius: 15px;}
.addanimbtn{background: url(../assets/images/addanimicon.png) no-repeat 12px center #1abd9b;color: #fff;}
.previewanimbtn{background: url(../assets/images/previewanimicon.png) no-repeat 12px center #ffffff;color: #1abd9b;}
.animcollapse{width: 300px;margin: 0 auto;position: fixed;bottom: 20px;top: 180px;right: 60px;overflow-y: auto;padding: 0 10px;}
.delanimbtn{position: absolute;right:5px;top: 0;width: 20px;height: 38px;background: url(../assets/images/delanimicon.png) no-repeat left center;z-index: 999;}
.numberblock .inputtime,.numberblock .inputdelay,.numberblock .inputcount{float:left;margin-bottom: 15px;}
.numberblock .inputtime>span,.numberblock .inputdelay>span,.numberblock .inputcount>span{display:inline-block;width:30px;height:36px;line-height:36px;text-align:center;font-size:14px;}


</style>
